import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Image, FlatList, StatusBar, TextInput, ScrollView} from 'react-native';
import { base } from "../../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import { getLocalTime } from "../../../../utils/utils";
import { reType } from "../../../../config";
import { i18n } from "../../../../utils/locales/i18n";

type Props = {};
export default class MyAssets extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: 'FCC' + i18n.t('r_succ'),
            headerStyle: {
                backgroundColor: '#ff7606',
                borderWidth: 0,
                borderColor: '#ff7606'
            },
            headerTintColor: '#fff',
            headerBackTitle: null
        }
    };
    constructor() {
        super();
        this.state = {
            orderData: ''
        //     code: 10000
        //     data: {Id: 32, Uid: 17, Token: "fcc", Sname: "", State: 0, SerialNum: "a0018fcc8addcc1c",…}
                    // Confirm: 0
                    // Created: 1546850781
                    // Id: 32
                    // ReceAddr: "0xCD5e48461D4bCf87F0b717cbCBe8eae2606dc6A5"
                    // RechAddr: "0xb6201e25958ab1767aae1cd29abe5c4ce9b3c007"
                    // RechSum: 12
                    // SerialNum: "a0018fcc8addcc1c"
                    // Sname: ""
                    // State: 0
                    // Token: "fcc"
                    // TxHash: ""
                    // Uid: 17
        // msg: "提交用户充币工单成功"
        // status: 200
        }
    }

    componentWillMount(): void {
        this.setState({
            orderData: JSON.parse(this.props.navigation.getParam('orderData'))
        })
    }
    render() {
        return (
            <View style={[base.flex_1, base.content_container, base.bg_orange, { paddingTop: 30, paddingBottom: 30}]}>
                <View style={[base.flex_1, { borderRadius: 5, padding: 20 }, base.bg_white]}>
                    <View style={{alignItems: 'center', paddingBottom: 20, borderBottomColor: '#eee', borderBottomWidth: 1}}>
                        <Image style={{width: 100, height: 100}} source={require('../../../../images/mine/success.png')}/>
                        <View style={{padding: 20}}><Text>{ i18n.t('info6') }</Text></View>
                    </View>
                    <View style={[{ paddingVertical: 20, paddingBottom: 30 }]}>
                        <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                            <View style={{width: 100}}>
                                <Text>{ i18n.t('s_num') }：</Text>
                            </View>
                            <View>
                                <Text style={[base.color_gray]}>{ this.state.orderData.SerialNum }</Text>
                            </View>
                        </View>
                        <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                            <View style={{width: 100}}>
                                <Text>{ i18n.t('r_amount') }：</Text>
                            </View>
                            <View>
                                <Text style={[base.color_gray]}>{ this.state.orderData.RechSum } FCC</Text>
                            </View>
                        </View>
                        <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                            <View style={{width: 100}}>
                                <Text>{ i18n.t('r_addr') }：</Text>
                            </View>
                            <View style={{flex: 1}}>
                                <Text style={[base.color_gray]}>
                                    { this.state.orderData.RechAddr }</Text>
                            </View>
                        </View>
                        <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                            <View style={{width: 100}}>
                                <Text>{ i18n.t('rec_addr') }：</Text>
                            </View>
                            <View style={{flex: 1}}>
                                <Text style={[base.color_gray]}>
                                    { this.state.orderData.ReceAddr }</Text>
                            </View>
                        </View>
                        <View style={[base.flex_row_start, { paddingVertical: 10}]}>
                            <View style={{width: 100}}>
                                <Text>{ i18n.t('creat_time') }：</Text>
                            </View>
                            <View>
                                <Text style={[base.color_gray]}>{ getLocalTime(this.state.orderData.Created) }</Text>
                            </View>
                        </View>
                        {/*<View style={[base.flex_row_start, { paddingVertical: 10 }]}>*/}
                            {/*<View style={{width: 100}}>*/}
                                {/*<Text>交易哈希：</Text>*/}
                            {/*</View>*/}
                            {/*<View>*/}
                                {/*<Text style={[base.color_gray]}>----</Text>*/}
                            {/*</View>*/}
                        {/*</View>*/}
                        <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                            <View style={{width: 100}}>
                                <Text style={{textAlign: 'justify'}}>{ i18n.t('state') }：</Text>
                            </View>
                            <View>
                                <Text style={[base.color_gray]}>{ reType[this.state.orderData.State] }</Text>
                            </View>
                        </View>
                    </View>
                    <View style={[base.flex_1, base.flex_col_center, { width: '100%'}]}>
                        <TouchableOpacity style={{width: '80%'}} onPress={() => this.props.navigation.navigate('MyAssets')}>
                            <LinearGradient
                                start={{x: 0, y: 0}}
                                end={{x: 1, y: 1}}
                                colors={['#feac1c', '#ff7506']}
                                style={{ width: '100%', height: 40, borderRadius: 25, justifyContent: 'center', alignItems: 'center' }}
                            >
                                <Text style={{color: '#fff'}}>{ i18n.t('btw') }</Text>
                            </LinearGradient>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Record')} style={{width: '80%', marginTop: 20}}>
                            <LinearGradient
                                start={{x: 0, y: 0}}
                                end={{x: 1, y: 1}}
                                colors={['#feac1c', '#ff7506']}
                                style={{ width: '100%', height: 40, borderRadius: 25, justifyContent: 'center', alignItems: 'center' }}
                            >
                                <Text style={{color: '#fff'}}>{ i18n.t('c_rc') }</Text>
                            </LinearGradient>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
